<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="订单编号" prop="orderNo">
        <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="店铺名称" prop="storeName">
        <el-input v-model="queryParams.storeName" placeholder="请输入店铺名称" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="用户" prop="userName">
        <el-input v-model="queryParams.userName" placeholder="请输入用户" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="商品" prop="spuName">
        <el-input v-model="queryParams.spuName" placeholder="请输入商品" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="订单状态" prop="state">
        <el-select v-model="queryParams.state" placeholder="请选择" clearable @change="handleQuery">
          <el-option v-for="item in orderState" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属专区" prop="columnType">
        <el-select v-model="queryParams.columnType" placeholder="请选择" clearable @change="handleQuery">
          <el-option v-for="item in columnTypeArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport"
          v-hasPermi="['mall:mallOrder:export']">导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="mallOrderList" @selection-change="handleSelectionChange" height="580">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="订单信息" align="center" width="200">
        <template #default="scope">
          <p>订单编号:{{ scope.row.orderNo }}</p>
          <p>订单价格:{{ scope.row.totalPrice }}</p>
          <p>订单状态:{{ stateFun(scope.row.state, orderState) }}</p>
          <p>备注:{{ scope.row.remark }}</p>
        </template>
      </el-table-column>
      <el-table-column label="商品信息" align="center" width="185">
        <template #default="scope">
          <p>商品名称:{{ scope.row.orderSpuList[0].spuInfo.name }}</p>
          <p>商品数量:{{ scope.row.orderSpuList[0].num }}</p>
          <p>
            所属专区:{{
              proxy.stateFun(
                scope.row.orderSpuList[0].spuInfo.columnType,
                columnTypeArr
              )
            }}
          </p>
          <p v-if="scope.row.orderSpuList[0].spuInfo.columnType == 3">
            店铺名称:{{ scope.row.orderSpuList[0].storeInfo.name }}
          </p>
          <div class="" v-if="scope.row.orderSpuList[0].skuInfo">
            <p>商品规格：</p>
            <p v-for="item in scope.row.orderSpuList[0].skuInfo.mallSkuSpecs">
              规格名：{{ item.specName }} --- 规格值:{{ item.specValue }}
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="收货信息" align="center" width="200">
        <template #default="scope">
          <p v-if="scope.row.mallAddress">
            收货人:{{ scope.row.mallAddress.name }}
          </p>
          <p v-if="scope.row.mallAddress">
            收货人电话:{{ scope.row.mallAddress.mobile }}
          </p>
          <p v-if="scope.row.mallAddress">
            地址:{{ scope.row.mallAddress.area + scope.row.mallAddress.detail }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="支付信息" align="center" width="200">
        <template #default="scope">
          <p>支付时间:{{ parseTime(scope.row.payTime) }}</p>
          <p>支付方式:{{ stateFun(scope.row.payWay, payWayList) }}</p>
          <p>支付金额:{{ scope.row.payPrice }}</p>
        </template>
      </el-table-column>
      <el-table-column label="支付凭证" align="center" width="200">
        <template #default="scope">
          <ImagePreview :src="scope.row.orderVoucher?.voucher" width="100px" height="100px"></ImagePreview>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="payTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="物流信息" align="center">
        <template #default="scope">
          <p v-if="scope.row.logisticsName">
            物流公司:{{ scope.row.logisticsName }}
          </p>
          <p v-if="scope.row.logisticsNo">
            物流单号:{{ scope.row.logisticsNo }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="创建人信息" align="center">
        <template #default="scope">
          <p>用户:{{ scope.row.createUserTemp ? scope.row.createUserTemp.userName : "" }}</p>
          <p>创建时间:{{ scope.row.createUserTemp ? scope.row.createUserTemp.createTime : "" }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleSend(scope.row)" v-hasPermi="['mall:mallOrder:edit']"
            v-if="scope.row.state != 0 && scope.row.state != 5">{{ scope.row.state == 1 ? "发货" : "修改物流信息" }}</el-button>
          <el-button link type="primary" icon="Edit" @click="handleColl(scope.row)"
            v-if="scope.row.payWay == 9 && scope.row.state == 5">收款确认</el-button>
          <el-button link type="primary" @click="handleLogistics(scope.row)" v-hasPermi="['mall:mallOrder:edit']"
            v-if="scope.row.state == 2 || scope.row.state == 3">查看物流信息</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改商品订单对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="mallOrderRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="订单编号" prop="orderNo">
          <el-input v-model="form.orderNo" placeholder="请输入订单编号" />
        </el-form-item>
        <el-form-item label="商品总价" prop="totalPrice">
          <el-input v-model="form.totalPrice" placeholder="请输入商品总价" />
        </el-form-item>
        <el-form-item label="关联地址" prop="addressId">
          <el-input v-model="form.addressId" placeholder="请输入关联地址" />
        </el-form-item>
        <el-form-item label="是否删除" prop="isDelete">
          <el-input v-model="form.isDelete" placeholder="请输入是否删除" />
        </el-form-item>
        <el-form-item label="订单状态" prop="state">
          <el-input v-model="form.state" placeholder="请输入订单状态" />
        </el-form-item>
        <el-form-item label="银行卡id" prop="bankCardId">
          <el-input v-model="form.bankCardId" placeholder="请输入银行卡id" />
        </el-form-item>
        <el-form-item label="支付时间" prop="payTime">
          <el-date-picker clearable v-model="form.payTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择支付时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="支付方式" prop="payWay">
          <el-input v-model="form.payWay" placeholder="请输入支付方式" />
        </el-form-item>
        <el-form-item label="支付金额" prop="payPrice">
          <el-input v-model="form.payPrice" placeholder="请输入支付金额" />
        </el-form-item>
        <el-form-item label="第三方订单号" prop="tradeNo">
          <el-input v-model="form.tradeNo" placeholder="请输入第三方订单号" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="部门id" prop="deptId">
          <el-input v-model="form.deptId" placeholder="请输入部门id" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog :title="sendTitle" v-model="sendShow" width="500px" append-to-body>
      <el-form ref="mallOrderRef" :model="sendForm" label-width="80px">
        <el-form-item label="物流名称" prop="logisticsName">
          <el-input v-model="sendForm.logisticsName" placeholder="请输入物流名称" />
        </el-form-item>
        <el-form-item label="物流单号" prop="logisticsNo">
          <el-input v-model="sendForm.logisticsNo" placeholder="请输入物流单号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitSendForm">确 定</el-button>
          <el-button @click="sendShow = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 物流信息展示 -->
    <el-dialog title="物流信息" v-model="logisticsShow" width="500px" append-to-body>
      <div class="flex">
        <h3 class="">物流公司:</h3>
        <h3 class="">
          {{ logisticsData.expressCompanyName }}
        </h3>
      </div>
      <div class="flex">
        <h3 class="">物流状态:</h3>
        <h3 class="">
          {{ logisticsData.logisticsStatusDesc }}
        </h3>
      </div>
      <div class="">
        <h3 class="">物流详情:</h3>
        <h3 class="">
          {{ logisticsData.theLastMessage }}
        </h3>
      </div>
      <div class="" style="height: 20px"></div>
      <el-timeline style="max-width: 500px">
        <el-timeline-item v-for="(activity, index) in logisticsData.logisticsTraceDetails" :key="index"
          :timestamp="activity.timestamp">
          {{ activity.desc }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>

    <el-dialog title="收款确认" v-model="collShow" width="500px" append-to-body>
      <el-form ref="collForms" :model="collForm" label-width="80px">
        <el-form-item label="审核状态" prop="verifyState">
          <el-radio-group v-model="collForm.verifyState">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitCollForm">确 定</el-button>
          <el-button @click="collShow = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="MallOrder">
import {
  listMallOrder,
  getMallOrder,
  delMallOrder,
  addMallOrder,
  updateMallOrder,
  mallOrderSend,
  mallOrderLogistics,
  orderCollConfirm,
} from "@/api/mall/mallOrder";

const { proxy } = getCurrentInstance();

const mallOrderList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const route = useRoute();

const orderState = ref([
  {
    label: "待付款",
    value: 0,
  },
  {
    label: "待发货",
    value: 1,
  },
  {
    label: "待确认",
    value: 5,
  },
  {
    label: "待收货",
    value: 2,
  },
  {
    label: "已完成",
    value: 3,
  },
  {
    label: "已取消",
    value: 4,
  },
]);

const columnTypeArr = ref([
  {
    label: "金积分达人",
    value: 1,
  },
  {
    label: "社群达人",
    value: 2,
  },
  {
    label: "本地生活",
    value: 3,
  },
  {
    label: "创业合伙人",
    value: 4,
  },
  {
    label: "消费增值区",
    value: 5,
  },
  {
    label: "熵豆兑换专区",
    value: 6,
  },
  {
    label: "创业联盟区",
    value: 7,
  },
  {
    label: "跨国商贸",
    value: 8,
  },
  {
    label: "社区数字店",
    value: 10,
  },
  {
    label: "趣味消费节",
    value: 11,
  },
  {
    label: "商品折扣券",
    value: 12,
  },
  {
    label: "资产包",
    value: 13,
  },
]);

const payWayList = ref([
  {
    label: "微信+消费金",
    value: 1,
  },
  {
    label: "支付宝+消费金",
    value: 2,
  },
  {
    label: "余额+消费金",
    value: 3,
  },
  {
    label: "银行卡支付",
    value: 9,
  },
  {
    label: "熵豆支付",
    value: 14,
  },
]);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    orderNo: null,
    totalPrice: null,
    addressId: null,
    isDelete: null,
    state: null,
    bankCardId: null,
    payTime: null,
    payWay: null,
    payPrice: null,
    tradeNo: null,
    deptId: null,
    storeName: null,
    columnType: route.query && route.query.columnType,
  },
  rules: {},
});

const { queryParams, form, rules } = toRefs(data);

const sendShow = ref(false);
const sendTitle = ref("");
const sendForm = reactive({
  id: undefined,
  logisticsNo: undefined,
  logisticsName: undefined,
});

/**
 * 处理收款确认
 */

const collShow = ref(false);
const collForm = ref({});

function handleColl(row) {
  collForm.value = {
    orderNo: row.orderNo,
    verifyState: null,
  };
  collShow.value = true;
}

function submitCollForm() {
  proxy.$modal.confirm("确认数据并确认收款?").then(function () {
    orderCollConfirm(collForm.value).then((res) => {
      getList();
      collShow.value = false;
      proxy.$modal.msgSuccess("确认收款成功");
    });
  });
}

// 处理发货
function handleSend(row) {
  sendForm.id = row.id;
  sendTitle.value = row.state == 1 ? "发货" : "修改物流信息";
  if (row.state == 1) {
    sendForm.logisticsNo = undefined;
    sendForm.logisticsName = undefined;
  } else {
    sendForm.logisticsNo = row.logisticsNo;
    sendForm.logisticsName = row.logisticsName;
  }
  sendShow.value = true;
  sendShow.value = true;
}

// 处理发货提交
function submitSendForm() {
  proxy.$modal.confirm("确认数据并发货?").then(function () {
    mallOrderSend(sendForm).then((res) => {
      getList();
      sendShow.value = false;
      proxy.$modal.msgSuccess("发货成功");
    });
  });
}

const logisticsShow = ref(false);
let logisticsData = ref(null);

// 查询物流信息
function handleLogistics(row) {
  mallOrderLogistics({
    orderNo: row.orderNo,
  }).then((res) => {
    res.data.data.logisticsTraceDetails.forEach((item) => {
      item.timestamp = proxy.parseTime(item.time);
    });
    logisticsData.value = res.data.data;
    logisticsShow.value = true;
  });
}

/** 查询商品订单列表 */
function getList() {
  loading.value = true;
  listMallOrder(queryParams.value).then((response) => {
    console.log("🚀🚀🚀 ~ listMallOrder ~ response:", response)
    mallOrderList.value = response.rows;
    console.log("🚀🚀🚀 ~ listMallOrder ~ mallOrderList.value:", mallOrderList.value)
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    orderNo: null,
    totalPrice: null,
    createTime: null,
    createBy: null,
    updateBy: null,
    updateTime: null,
    addressId: null,
    isDelete: null,
    state: null,
    bankCardId: null,
    payTime: null,
    payWay: null,
    payPrice: null,
    tradeNo: null,
    remark: null,
    deptId: null,
    spuName: null,
  };
  proxy.resetForm("mallOrderRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加商品订单";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value;
  getMallOrder(_id).then((response) => {
    form.value = response.data;
    open.value = true;
    title.value = "修改商品订单";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["mallOrderRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != null) {
        updateMallOrder(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addMallOrder(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal
    .confirm('是否确认删除商品订单编号为"' + _ids + '"的数据项？')
    .then(function () {
      return delMallOrder(_ids);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => { });
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "mall/mallOrder/export",
    {
      ...queryParams.value,
    },
    `mallOrder_${new Date().getTime()}.xlsx`
  );
}

getList();
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
